<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>黏土工程</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="${base!}/assets/front/h5/css/icons-extra.css" />
		<link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
		<link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
		<style>


			.red_x {
				height: auto;
				width: 1.2rem;
			}
			img {
				vertical-align: middle;
			}
			.red_icon {
				width: 1.2rem;
				height: auto;
				margin: 0 .2rem;
			}
			.red_x {
				height: auto;
				width: 1.2rem;
			}
			.louceng{
				font-size: 20px;
				margin-top: 0;
				margin-bottom: 10px;
				color: #020202;
				margin-left: 42%;
			}
			.productList{
				width: 50%;
			}
			.circle{
				width: 30px;
				height: 30px;
				color: white;
				background-color: #f9850d;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				position: absolute;
				left: 59%;
				top: -7%;
				text-align: center;
				line-height: 30px;
			}
			.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear, .mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech {
				top: 13px;
				right: 0;
			}
		</style>
	</head>
	<body class="simp_hasfooter">
		
		
		<header class="mui-bar mui-bar-nav top-color">
		    <!--<div class="mui-title mui-input-row " >-->
                <!--<input type="search" class="mui-input-clear" style="background: white;" placeholder="请输入品牌和名称">-->
		    <!--</div>-->
			<h1 class="mui-title" style="color: white;">黏土创意</h1>
		</header>
		<footer class="mui-bar-new mui-bar-tab-new" >
			<ul class="ful">
				<li class="active">
					<a href="javascript:void(0);" onclick="window.location.href='${base!}/open/h5/niantu/index.html'">
						<img src="${base!}/assets/front/newH5/images/icon1_active.png" alt="" />
						<span>首页</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="${base!}/assets/front/newH5/images/icon2.png" onclick="window.location.href='${base!}/open/h5/cart/shoppingCart.html'" alt="" />
						<span>购物车</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="${base!}/assets/front/newH5/images/icon3.png" alt="" onclick="window.location.href='${base!}/open/h5/coupon/receiveCoupon.html'" />
						<span>领券中心</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<img src="${base!}/assets/front/newH5/images/icon4.png" alt="" onclick="window.location.href='${base!}/open/h5/niantu/userCenter.html'" />
						<span>个人中心</span>
					</a>
				</li>
			</ul>
		</footer>
	<div id="vue">

		
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop" style="margin-top: 40px;">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="banner" style="height: 200px;">
					</a>
				</div>

				<!-- 第二张 -->
				<div class="mui-slider-item" v-for="item in bannerList" :key="item.id">
					<a href="#">
						<img :src="item.imgurl" style="height: 200px;">
					</a>
				</div>
		
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img :src="banner" style="height: 200px;">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator" v-for="item in bannerList"></div>
			</div>
		</div>
		
		<div class="mui-content simp_content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9 ">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/product/list.html">
		                    <img src="${base!}/assets/front/h5/img/tu1.png" width="80%;"/>
		                    <div class="mui-media-body">在线商城</div>
		                </a>
		            </li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/cms/video.html">
		                    <img src="${base!}/assets/front/h5/img/tu2.png" width="80%;"/>
		                    <div class="mui-media-body">视频专区</div>
		                </a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/product/list.html?goodsClass=1">
		                    <img src="${base!}/assets/front/h5/img/tu3.png" width="80%;"/>
		                    <div class="mui-media-body">宝妈专区</div>
		                </a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/niantu/tutorial.html">
		                    <img src="${base!}/assets/front/h5/img/tu4.png" width="80%;"/>
		                    <div class="mui-media-body">黏土教程</div>
		                </a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/niantu/creativeArt.html">
		                    <img src="${base!}/assets/front/h5/img/tu5.png" width="80%;"/>
		                    <div class="mui-media-body">创意美术</div>
		                </a>
		            </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		            	<a href="${base!}/open/h5/niantu/talentShow.html">
		                    <img src="${base!}/assets/front/h5/img/tu6.png" width="80%;"/>
		                    <div class="mui-media-body">达人秀场</div>
		                </a>
		            </li>
		            
		        </ul> 
		</div>
		<div class="rdcp">
			<div class="rdcp_title">
				<p class="louceng">
					热门商品
				</p>
			</div>
			<div class="mui-content simp_content"  id="productList">
				<ul class="mui-table-view mui-grid-view mui-grid-9 product_imglist">
					<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-3 productList"  v-for="item in productList" :key="item.id">
						<a v-bind:href="'${base!}/open/h5/product/productDetail.html?id='+item.id" >
							<img  :src="item.imgList" />
							<div class="mui-media-body">{{item.name}}</div>
							<div class="mui-media-body" >
								<span class="left1">￥{{item.price}}</span>
								<span class="left2 text-color-1">月销{{item.saleNumMonth}}笔</span>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

		<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
		<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
		<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
		<script type="application/javascript">

			// var appid = "${appId!}";
            // var code = "${code!}";
            // var baseUrl = window.location.origin;
            // var redirect_uri = baseUrl+"/open/h5/niantu/index.html";
            // redirect_uri = encodeURI(redirect_uri);
			//
            // var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
            // if (ua.match(/MicroMessenger/i) == "micromessenger") {
            //     //在微信中打开
            //     if(code==null || code== "") {
			// 		//1.重定向跳转获取code
            //         window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?" +
            //             "appid=" + appid + "&" +
            //             "redirect_uri="+redirect_uri+"&" +
            //             "response_type=code&" +
            //             "scope=snsapi_base&" +
            //             "state=11001#wechat_redirect";
            //     }
            // }


			mui.init({
				swipeBack:true //启用右滑关闭功能
			});


            var vue = new Vue({
                el: '#vue',
                data: {
                    bannerList: [],
                    productList: [],
                    banner:''
                },
                created:function () {   //实例初始化创建完成执行

                    this.getBanner()     //调用自身方法
					this.getProductList();
                },
                methods:{              //定义封装方法
                    //获取列表
                    getBanner:function () {
                        var self = this;
                        $.ajax({
                            type:"POST",
                            url:"${base!}/open/h5/niantu/getAdv.html",
                            dataType:"JSON",
							data:{

							},
                            success:function(data){
                                if (data.code == 0) {
                                   var d = data.data;
                                    self.bannerList = d;
                                    self.banner = d[0].imgurl;
                                    var slider = mui("#slider");
                                    slider.slider({
                                        interval: 5000
                                    });
                                    window.setTimeout(function () {
                                        $(".mui-indicator").eq(0).addClass("mui-active");
                                    },200);
                                } else {

                                }
                            }
                        });

                    },
                    //获取列表
                    getProductList:function () {
                        var self = this;
                        var key = $("#searchKey").val();
                        $.ajax({
                            type:"POST",
                            url:"${base!}/open/h5/product/ProductList.html",
                            dataType:"JSON",
                            data:{
                                key:key,
								isRecommend:1
                            },
                            success:function(data){
                                if (data.code == 0) {
                                    var d = data.data;
                                    self.productList = d;
                                } else {

                                }
                            }
                        });

                    }
                },
                watch:{     //监听器
                    // carModel:function () {
                    //     this.getProvince();
                    // }
                }

            })


		</script>
	</body>
</html>
